<template>
    <div class="main_content">
        <div class="mat">
            <div class="left">
                <div class="search">
                    <Input v-model="keyword" placeholder="请输入材料类别名称" style="width:50%;margin-right:10px" clearable />
                    <input type="text" class="intBox" style="display:none" />
                    <el-button type="primary"  @click="searchMatType" size="small" plain>搜索</el-button>
                    <el-button type="info" @click="clearMatType" size="small" plain>重置</el-button>
                </div>
                <div class="mat_table">
                    <el-table :data="matTypeList" row-key="id" height="600px" @row-click="getMat" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="name" label="材料类别" width="180px"></el-table-column>
                        <el-table-column prop="weighFlag" label="是否称重">
                            <template slot-scope="scope">
                                <span v-if="scope.row.weighFlag == 0">否</span>
                                <span v-if="scope.row.weighFlag == 1">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="diffType" label="偏差类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.diffType == 1">范围偏差</span>
                                <span v-if="scope.row.diffType == 2">比例偏差</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="正负偏差">
                            <template slot-scope="scope">
                                <div v-if="scope.row.diffType == 1">
                                    <p>正差：{{scope.row.plusDiff}}吨</p>
                                    <p>负差：{{scope.row.minusDiff}}吨</p>
                                </div>
                                <div v-if="scope.row.diffType == 2">
                                    <p>正差：{{scope.row.plusDiff}}%</p>
                                    <p>负差：{{scope.row.minusDiff}}%</p>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="mat_more">
                    <el-button type="primary" @click="getAllMatType" size="small" plain v-preventReClick="1500">材料设置管理</el-button>
                </div>
            </div>
            <div class="right">
                <h2>{{matName}}</h2>
                <div class="search">
                    <span style="margin-right: 10px;">关键字搜索:</span>
                    <Input v-model="matKeyWord" placeholder="请输入材料类别名称，编号" style="width: 300px; " maxlength="20" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                    <el-button :type="matId ==''?'info':'primary'" style="margin-left:20px;margin-right:10px" @click="searchMat" :disabled="matId ==''" plain size="small">搜索</el-button>
                    <el-button type="info" @click="clearMat" size="small" :disabled="matId ==''" plain>重置</el-button>
                </div>
                <div>
                    <el-button :type="matId =='' ||!btnList.includes('fmam/matType/add')?'info':'primary'" style="margin-top:20px;" @click="matUpdateRow(0)" :disabled="matId =='' || !btnList.includes('fmam/matType/add')" plain size="small">添加材料明细</el-button>
                </div>
                <div class="table" style="width:100%;margin:20px auto;">
                    <el-table :data="matList" style="width: 100%">
                        <el-table-column fixed label="编码 | 名称">
                            <template slot-scope="scope">
                                <p>编码:{{scope.row.fullCode}}</p>
                                <p>名称:{{scope.row.name}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="规格型号 | 材质">
                            <template slot-scope="scope">
                                <p>规格型号:{{scope.row.spec}}{{scope.row.model}}</p>
                                <p>材质:{{scope.row.texture}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unitName" label="单位"></el-table-column>
                        <el-table-column label="正负偏差">
                            <template slot-scope="scope">
                                <p>正差:{{scope.row.plusDiff}}</p>
                                <p>负差:{{scope.row.minusDiff}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="150px">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="matUpdateRow(1,scope.$index, scope.row)" type="text" size="small" :disabled="!btnList.includes('fmam/matType/edit')">编辑</el-button>
                                <el-button :style="!btnList.includes('fmam/matType/del')?'color:#C0C4CC':'color:red'" @click.native.prevent="matRemove(scope.$index, scope.row)" type="text" size="small" :disabled="!btnList.includes('fmam/matType/del')">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="matList.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="matTypeModal" title="材料类别管理" width="1000px;" :mask-closable="false" :footer-hide="true">
            <div style="width:98%;margin:0 auto; margin-bottom:20px;display:flex;justify-content: flex-start; ">
                <el-button :type="!btnList.includes('fmam/mat/add')?'info':'primary'" @click="matTypeUpdateRow(0)" style="width:60px;margin-right:10px" size="small" plain :disabled="!btnList.includes('fmam/mat/add')">新建</el-button>
                <el-button :type="!btnList.includes('fmam/mat/imp')?'info':'primary'" @click="download" size="small" plain :disabled="!btnList.includes('fmam/mat/imp')" v-preventReClick="1500">下载导入模板</el-button>
                <div style="position: relative;margin-left:10px ">
                    <el-button :type="!btnList.includes('fmam/mat/imp')?'info':'primary'" size="small" plain :disabled="!btnList.includes('fmam/mat/imp')">批量导入</el-button>
                    <input id="upload_file" type="file" @change="getImportExcel" accept=".xlsx,.xls" style="position: absolute;left:0;top:0;height:40px;opacity: 0; width:80px;" :disabled="!btnList.includes('fmam/mat/imp')"/>
                </div>
            </div>
            <div class="mat_content" v-if="matTypeFlag">
                <div class="title">
                    <span v-if="flag&&!updataFlag">新建材料类别</span>
                    <span v-if="!flag">编辑材料类别</span>
                    <span v-if="flag&&updataFlag">新建下级材料类别</span>
                </div>
                <h2>基本信息</h2>
                <div class="list">
                    <div class="item">
                        <span class="tip">*</span>
                        <span>类别编码:</span>
                        <el-input placeholder="请输入类别编码" style="width: 300px" v-model="matTypeCode" size="small" :disabled="!flag&&codeFlag">
                            <template slot="prepend" v-if="!flag ||updataFlag">{{fullCode}}</template>
                        </el-input>
                    </div>
                    <div class="item">
                        <span class="tip">*</span>
                        <span>类别名称:</span>
                        <Input v-model="matTypeName" placeholder="请输入类别名称" style="width: 300px"  show-word-limit :maxlength="count" clearable />
                    </div>
                </div>
                <h2>称重信息</h2>
                <div class="list">
                    <div class="item">
                        <span>是否称重:</span>
                        <el-radio v-model="weighFlag" label="1">是</el-radio>
                        <el-radio v-model="weighFlag" label="0">否</el-radio>
                    </div>
                </div>
                <div class="list" v-if="isFlag">
                    <div class="item">
                        <span>偏差类型:</span>
                        <Select v-model="diffType" style="width:300px;" placeholder="请选择偏差类型">
                            <Option v-for="item in diffTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list" v-if="isFlag">
                    <div class="item">
                        <span>正差:</span>
                        <el-input-number v-model="plusDiff" controls-position="right" :min="0" :max="100" style="width:300PX"></el-input-number>
                    </div>
                    <div class="item">
                        <span>负差:</span>
                        <el-input-number v-model="minusDiff" controls-position="right" :min="0" :max="100" style="width:300PX"></el-input-number>
                    </div>
                </div>
                <div class="submit">
                    <el-button @click="cancel(1)" style="margin-right:20px;" type="info" size="small" plain>取消</el-button>
                    <el-button type="primary" @click="submitMatType" size="small" plain v-preventReClick="1500">确定</el-button>
                </div>
            </div>
            <div class="mat_table">
                <el-table :data="allMatTypeList" style="width: 100%;" row-key="id" height="500px" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="fullCode" label="编码" width="180px"></el-table-column>
                    <el-table-column prop="name" label="材料类别" width="180px"></el-table-column>
                    <el-table-column prop="weighFlag" label="是否称重">
                        <template slot-scope="scope">
                            <span v-if="scope.row.weighFlag == 0">否</span>
                            <span v-if="scope.row.weighFlag == 1">是</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="diffType" label="偏差类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.diffType == 1">范围偏差</span>
                            <span v-if="scope.row.diffType == 2">比例偏差</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="正负偏差">
                        <template slot-scope="scope">
                            <div v-if="scope.row.diffType == 1">
                                <p>正差:{{scope.row.plusDiff}}吨</p>
                                <p>负差:{{scope.row.minusDiff}}吨</p>
                            </div>
                            <div v-if="scope.row.diffType == 2">
                                <p>正差:{{scope.row.plusDiff}}%</p>
                                <p>负差:{{scope.row.minusDiff}}%</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="160px" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="matTypeUpdateRow(1,scope.$index, scope.row)" type="text" size="small" :disabled="!btnList.includes('fmam/mat/edit')">编辑</el-button>
                            <el-button @click.native.prevent="matTypeUpdateRow(0,scope.$index, scope.row)" type="text" size="small" :disabled="!btnList.includes('fmam/mat/add')">新建下级</el-button>
                            <el-button :style="!btnList.includes('fmam/mat/del')?'color:#C0C4CC':'color:red'" @click.native.prevent="matTypeRemove(scope.$index,scope.row)" type="text" size="small" :disabled="!btnList.includes('fmam/mat/del')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </Modal>

        <Modal v-model="matUpdateModal" :title="isAdd?'添加材料明细':'编辑材料明细'" width="1000px;" :mask-closable="false">
            <div class="mat_content" style=" border:none;">
                <h2>基本信息</h2>
                <div class="list">
                    <div class="item">
                        <span class="tip">*</span>
                        <span>材料编码:</span>
                        <el-input placeholder="请输入材料编码" style="width: 300px" v-model="code" size="small">
                            <template slot="prepend">{{matfullCode}}</template>
                        </el-input>
                    </div>
                    <div class="item">
                        <span class="tip">*</span>
                        <span>材料名称:</span>
                        <Input v-model="name" placeholder="请输入材料名称" style="width: 300px" show-word-limit :maxlength="count" clearable />
                    </div>
                </div>
                <h2>规格单位</h2>
                <div class="list">
                    <div class="item">
                        <span>材料规格:</span>
                        <Input v-model="spec" placeholder="请输入材料规格" style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span>材料型号:</span>
                        <Input v-model="model" placeholder="请输入材料型号" style="width: 300px" clearable />
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>材料材质:</span>
                        <Input v-model="texture" placeholder="请输入材料材质" style="width: 300px" clearable />
                    </div>
                    <div class="item">
                        <span class="tip">*</span>
                        <span>单位名称:</span>
                        <Select v-model="unitId" style="width:300px;" placeholder="请选择单位名称" @on-change="getUnitType">
                            <Option v-for="item in unitList" :value="item.unitId" :key="item.unitId">{{item.unitName}}</Option>
                        </Select>
                    </div>
                </div>
                <h2>单位换算</h2>
                <el-button style="margin-left:3%;margin-top:10px;" @click="addUnit" type="primary" size="small" plain>新增换算单位</el-button>
                <div class="ulbox">
                    <div class="form-group" v-for="(i,j) in matUnitList" :key="j">
                        <span style="margin-right:10px">1</span>
                        <p style="display:none" class="p_first">{{i.unitId}}</p>
                        <div class="input-group">
                            <span class="spanbox">{{i.unitName}}</span>
                            <button style="width:32px " @click="getfirst(j)">
                                <Icon type="md-arrow-dropdown" size="24" />
                            </button>
                            <ul v-if="first_ulbox == j">
                                <li v-for="(item) in unitList" :key="item.unitId" @click="getfristItem(item)">{{item.unitName}}</li>
                            </ul>
                        </div>
                        <span style="margin-right:10px;margin-left:10px;">=</span>
                        <input class="deal" :value="i.convertFactor" @blur.prevent="blur" type="number" style="width:40px;margin-right:10px" />
                        <p style="display:none" class="p_second">{{i.convertUnitId}}</p>
                        <div class="input-group_second">
                            <span class="spanbox">{{i.convertUnitName}}</span>
                            <button style="width:32px " @click="getsecond(j)">
                                <Icon type="md-arrow-dropdown" size="24" />
                            </button>
                            <ul v-if="second_ulbox == j">
                                <li v-for="(item) in unitList" :key="item.unitId" @click="getSecondItem(item)">{{item.unitName}}</li>
                            </ul>
                        </div>
                        <Icon type="md-close" style="cursor: pointer;margin-left:10px;" size="24" @click="removeUnit(j)" />
                    </div>
                </div>
                <h2>偏差信息</h2>
                <div class="list">
                    <div class="item">
                        <span>偏差类型:</span>
                        <Select v-model="matdiffType" style="width:300px;" placeholder="请选择偏差类型" >
                            <Option v-for="item in diffTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>正差:</span>
                        <el-input-number v-model="matplusDiff" controls-position="right" :min="0" :max="100" style="width:300PX"></el-input-number>
                    </div>
                    <div class="item">
                        <span>负差:</span>
                        <el-input-number v-model="matminusDiff" controls-position="right" :min="0" :max="100" style="width:300PX"></el-input-number>
                    </div>
                </div>
                <h2>备注</h2>
                <div class="list">
                    <Input v-model="matremark" placeholder="请输入文字" style="width: 96%;margin:0 auto;" type="textarea" />
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(5)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="matTypeDeteleModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(0)" type="info" size="small" plain>取消</el-button>
                <el-button @click="matTypeDetele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="matDeteleModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="matDetele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="Modal" title="提示" width="600px;" :mask-closable="false">
            <p style="width:100%;text-align:center;color:#000000;font-size:16px;">您是否确认同步修改</p>
            <div style="width:100%;text-align:center;font-size:16px;color:#000000;margin-bottom:10px">所有子材料的偏差类型、正负差数值</div>
            <div style="width:100%;text-align:center;font-size:14px;color:#555;">点击确定后，所有子材料的偏差类型、正负差数值，将会被同步修改</div>
            <div slot="footer">
                <el-button @click="cancel(2)" size="small" plain type="info">取消</el-button>
                <el-button @click="cancel(3)" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="ImportModal" title="导入结果" width="600px;" :mask-closable="false">
            <div class="imp">
                <p>
                    <span>成功:</span>
                    <span>{{successNumber}}条</span>
                </p>
                <p>
                    <span>失败:</span>
                    <span>{{failNumber}}条</span>
                </p>
            </div>
            <div slot="footer">
                <el-button @click="cancel(6)" type="info" size="small" plain>取消</el-button>
                <el-button @click="cancel(7)" type="primary" size="small" plain >确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getMatTypelist,
    getMatTypeDel,
    getMatTypeEdit,
    getMatTypeAdd,
    getMatList,
    getMatAdd,
    getUnitList,
    getMatEdit,
    getMatDel,
    getMatimportExcel
} from "@/api/api.js";
export default {
    watch: {
        weighFlag(val) {
            if (val == 1) {
                this.isFlag = true;
            } else if (val == 0) {
                this.isFlag = false;
            }
        },
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.porjectType = val.deptId;
                this.matList = [];
                this.totalCount = 0;
                this.matId = "";
                this.matName = "";
                this.keyword = "";
                this.getMatType();
            }
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    data() {
        return {
            porjectType: "",
            keyword: "",
            matTypeList: [],
            matTypeModal: false,
            allMatTypeList: [],
            matTypePid: "",
            matTypeDeteleModal: false,
            matTypeDeteleId: "",
            matTypeName: "",
            matTypeCode: "",
            weighFlag: "0",
            weight: "0",
            isFlag: true,
            diffTypeList: [
                {
                    id: 1,
                    name: "范围偏差"
                },
                {
                    id: 2,
                    name: "比例偏差"
                }
            ],
            diffType: "",
            plusDiff: "",
            minusDiff: "",
            matTypeFlag: false,
            updataFlag: false,
            flag: false,
            Modal: false,
            minus: "",
            plus: "",
            diff: "",
            matTypeId: "",
            changeFlag: 0,
            matList: [],
            matKeyWord: "",
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            matRow: {},
            matName: "",
            matId: "",
            unitList: [],
            isAdd: true,
            matUpdateModal: false,
            code: "",
            name: "",
            spec: "",
            model: "",
            texture: "",
            unitId: 1,
            unitName: "",
            matplusDiff: "",
            matminusDiff: "",
            matdiffType: 1,
            matremark: "",
            matUnitList: [],
            matUnitAllList: [],
            colseIndex: -1,
            first_ulbox: -1,
            second_ulbox: -1,
            first_flag: false,
            second_flag: false,
            arr: [],
            matDeteleModal: false,
            matRemoveId: "",
            fullCode: "",
            matfullCode: "",
            codeFlag: true,
            ImportModal: false,
            importResultDir: "",
            failNumber: "",
            successNumber: "",
            btnList:[],
            count:32,
        };
    },
    methods: {
        //获取所有的材料单位
        getUnit() {
            getUnitList()
                .then(res => {
                    if (res.code == 200) {
                        this.unitList = res.data.list;
                    } else {
                        /* 错误请求阻止 */
                        // this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getMatType() {
            let params = {
                keyword: this.keyword,
                deptId: this.porjectType
            };
            getMatTypelist(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matTypeList = res.data.list;
                    } else {
                        /* 错误请求阻止 */
                        // this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getAllMatType() {
            this.matTypeFlag = false;
            let params = {
                keyword: "",
                deptId: this.porjectType
            };
            getMatTypelist(params)
                .then(res => {
                    if (res.code == 200) {
                        this.allMatTypeList = res.data.list;
                        this.matTypeModal = true;
                    } else {
                        /* 错误请求阻止 */
                        // this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        searchMatType() {
            this.getMatType();
        },
        clearMatType() {
            this.keyword = "";
            this.getMatType();
        },
        matTypeUpdateRow(type, index, rows) {
            if (type == 0) {
                this.flag = true;
                this.matTypeName = "";
                this.matTypeCode = "";
                this.weighFlag = "1";
                this.diffType = 1;
                this.plusDiff = "";
                this.minusDiff = "";
                if (rows) {
                    this.updataFlag = true;
                    this.matTypePid = rows.id;
                    this.fullCode = rows.fullCode;
                } else {
                    this.matTypePid = "";
                    this.updataFlag = false;
                }
            } else {
                if (rows.children) {
                    this.codeFlag = true;
                } else {
                    this.codeFlag = false;
                }
                this.flag = false;
                this.matTypeId = rows.id;
                let obj = rows;
                this.matTypeName = obj.name;
                this.matTypeCode = obj.code;
                this.fullCode = obj.fullCode;
                if (obj.fullCode == obj.code) {
                    this.fullCode = "";
                } else {
                    let num = obj.fullCode.length - obj.code.length;
                    this.fullCode = rows.fullCode.substring(0, num);
                }
                this.diffType = obj.diffType == "" || obj.diffType == undefined ? 0 : obj.diffType;
                this.diff = obj.diffType == "" || obj.diffType == undefined ? 0 : obj.diffType;
                this.plusDiff = obj.plusDiff == "" || obj.plusDiff == undefined ? 0 : obj.plusDiff;
                this.minusDiff = obj.minusDiff == "" || obj.minusDiff == undefined ? 0 : obj.minusDiff;
                this.plus = obj.plusDiff == "" || obj.plusDiff == undefined ? 0 : obj.plusDiff;
                this.minus = obj.minusDiff == "" || obj.minusDiff == undefined ? 0 : obj.minusDiff;
                this.weighFlag = String(obj.weighFlag);
                this.weight = String(obj.weighFlag);
            }
            this.matTypeFlag = true;
        },
        submitMatType() {
            if (this.matTypeCode == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "材料类别编码不能为空"
                });
                return;
            } else {
                let str = /^[0-9a-zA-Z]*$/g;
                if (!str.test(this.matTypeCode)) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "材料类别编码只能由数字或字母组成"
                    });
                    return;
                }
                if (this.matTypeCode.length > 4) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "材料类别编码不能超过4个字符"
                    });
                    return;
                }
            }
            if (this.matTypeName == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "材料类别名称不能为空"
                });
                return;
            }
            if(this.weighFlag == 1) {
                if(this.diffType == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请选择偏差类型"
                    });
                    return;
                }
            }
            var regex = /^(\d+)(.\d{0,3})?$/;
            if (!regex.test(this.plusDiff) || !regex.test(this.minusDiff)) {
                this.$Modal.warning({
                    title: "提示",
                    content: "正负偏差不能超过三个小数点"
                });
                return;
            }
            if (this.flag) {
                let params = {
                    fullCode: !this.updataFlag ? this.matTypeCode : this.fullCode + this.matTypeCode,
                    code: this.matTypeCode,
                    name: this.matTypeName,
                    pid: this.matTypePid,
                    deptId: this.porjectType,
                    weighFlag: this.weighFlag,
                    diffType: this.weighFlag == 1 ? this.diffType : "",
                    plusDiff: this.weighFlag == 1 ? this.plusDiff : "",
                    minusDiff: this.weighFlag == 1 ? this.minusDiff : ""
                };
                getMatTypeAdd(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.matTypeFlag = false;
                            this.$Message.success("操作成功");
                            this.getAllMatType();
                            this.getMatType();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                if (
                    this.minusDiff != this.minus ||
                    this.plusDiff != this.plus ||
                    this.diffType != this.diff ||
                    this.weighFlag != this.weight
                ) {
                    this.Modal = true;
                    return;
                }
                this.updataSumbit();
            }
        },
        updataSumbit() {
            if (this.weighFlag == 0) {
                this.diffType = "";
                this.plusDiff = "";
                this.minusDiff = "";
            } else {
                this.diffType = 0 ? "" : this.diffType;
                this.plusDiff = 0 ? "" : this.plusDiff;
                this.minusDiff = 0 ? "" : this.minusDiff;
            }
            let params = {
                fullCode: this.fullCode + this.matTypeCode,
                id: this.matTypeId,
                code: this.matTypeCode,
                name: this.matTypeName,
                weighFlag: this.weighFlag,
                deptId: this.porjectType,
                diffType: this.diffType,
                plusDiff: this.plusDiff,
                minusDiff: this.minusDiff,
                changeFlag: this.changeFlag
            };
            getMatTypeEdit(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matTypeFlag = false;
                        this.$Message.success("操作成功");
                        this.getAllMatType();
                        this.getMatType();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        matTypeRemove(index, rows) {
            this.matTypeDeteleId = rows.id;
            this.matTypeDeteleModal = true;
        },
        matTypeDetele() {
            getMatTypeDel(this.matTypeDeteleId)
                .then(res => {
                    if (res.code == 200) {
                        this.matTypeDeteleModal = false;
                        this.$Message.success("操作成功");
                        this.getAllMatType();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getMat(row) {
            this.matName = row.name;
            this.matRow = row;
            this.matId = row.id;
            this.matfullCode = row.fullCode;
            let params = {
                matTypeId: this.matId,
                pageSize: this.pageSize,
                keyword: this.matKeyWord
            };
            getMatList(params, this.pageNum)
                .then(res => {
                    if (res.code == 200) {
                        this.matList = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        blur() {
            this.getmatUnitList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getMat(this.matRow);
        },
        searchMat() {
            this.getMat(this.matRow);
        },
        clearMat() {
            this.matKeyWord = "";
            this.getMat(this.matRow);
        },
        getUnitType(index) {
            this.unitId = index;
            this.unitList.forEach(i => {
                if (i.unitId == index) {
                    this.unitName = i.unitName;
                }
            });
            this.getmatUnitList();
        },
        addUnit() {
            this.matUnitList = [];
            let obj = {
                convertUnitId: "",
                convertUnitName: "",
                convertFactor: "",
                unitId: "",
                unitName: ""
            };
            this.matUnitAllList.push(obj);
            for (let i in this.matUnitAllList) {
                let obj = {
                    convertUnitId: $(".form-group").eq(i).find(".p_second").text(),
                    convertUnitName: $(".form-group").eq(i).find(".input-group_second .spanbox").text(),
                    unitId: $(".form-group").eq(i).find(".p_first").text(),
                    unitName: $(".form-group").eq(i).find(".input-group .spanbox").text(),
                    convertFactor: $(".form-group").eq(i).find(".deal ").val()
                };
                this.matUnitList.push(obj);
            }
        },
        removeUnit(j) {
            this.matUnitList = [];
            for (let i in this.matUnitAllList) {
                let obj = {
                    convertUnitId: $(".form-group").eq(i).find(".p_second").text(),
                    convertUnitName: $(".form-group").eq(i).find(".input-group_second .spanbox").text(),
                    unitId: $(".form-group").eq(i).find(".p_first").text(),
                    unitName: $(".form-group").eq(i).find(".input-group .spanbox").text(),
                    convertFactor: $(".form-group").eq(i).find(".deal ").val()
                };
                this.matUnitList.push(obj);
            }
            this.matUnitList.splice(j, 1);
            this.matUnitAllList.splice(j, 1);
        },
        getfirst(i) {
            this.first_flag = !this.first_flag;
            if (this.first_flag) {
                this.first_ulbox = i;
            } else {
                this.first_ulbox = -1;
            }
        },
        getsecond(i) {
            this.second_flag = !this.second_flag;
            if (this.second_flag) {
                this.second_ulbox = i;
            } else {
                this.second_ulbox = -1;
            }
        },
        getfristItem(item) {
            let i = this.first_ulbox;
            $(".form-group").eq(i).find(".input-group .spanbox").text(item.unitName);
            $(".form-group").eq(i).find(".p_first").text(item.unitId);
            this.first_ulbox = -1;
        },
        getSecondItem(item) {
            let i = this.second_ulbox;
            $(".form-group").eq(i).find(".input-group_second .spanbox").text(item.unitName);
            $(".form-group").eq(i).find(".p_second").text(item.unitId);
            this.second_ulbox = -1;
        },
        getmatUnitList() {
            this.matUnitList = [];
            for (let i in this.matUnitAllList) {
                let obj = {
                    convertUnitId: $(".form-group").eq(i).find(".p_second").text(),
                    convertUnitName: $(".form-group").eq(i).find(".input-group_second .spanbox").text(),
                    unitId: $(".form-group").eq(i).find(".p_first").text(),
                    unitName: $(".form-group").eq(i).find(".input-group .spanbox").text(),
                    convertFactor: $(".form-group").eq(i).find(".deal ").val()
                };
                this.matUnitList.push(obj);
            }
        },
        matUpdateRow(type, index, rows) {
            if (type == 0) {
                this.isAdd = true;
                this.code = "";
                this.name = "";
                this.spec = "";
                this.model = "";
                this.texture = "";
                this.unitId = "";
                this.matminusDiff = "";
                this.matplusDiff = "";
                this.matremark = "";
                this.matUnitList = [];
                this.matUnitAllList = [];
                this.matdiffType = 1 ;
            } else if (type == 1) {
                this.isAdd = false;
                this.id = rows.id;
                this.matUnitList = rows.unitList;
                this.matUnitAllList = rows.unitList;
                this.code = rows.code;
                this.name = rows.name;
                this.spec = rows.spec;
                this.model = rows.model;
                this.texture = rows.texture;
                this.unitId = rows.unitId;
                this.matminusDiff = rows.minusDiff;
                this.matplusDiff = rows.plusDiff;
                this.matremark = rows.remark;
                this.unitName = rows.unitName;
                this.matdiffType = rows.diffType;
            }
            this.matUpdateModal = true;
        },
        submit() {
            this.arr = [];
            for (let i in this.matUnitAllList) {
                let obj = {
                    convertUnitId: $(".form-group").eq(i).find(".p_second").text(),
                    convertUnitName: $(".form-group").eq(i).find(".input-group_second .spanbox").text(),
                    unitId: $(".form-group").eq(i).find(".p_first").text(),
                    unitName: $(".form-group").eq(i).find(".input-group .spanbox").text(),
                    convertFactor: Number($(".form-group").eq(i).find(".deal ").val()
                    )
                };
                this.arr.push(obj);
            }
            if (this.code == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "材料编码不能为空"
                });
                return;
            } else {
                let str = /^[0-9a-zA-Z]*$/g;
                if (!str.test(this.code)) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "材料编码只能由数字或字母组成"
                    });
                    return;
                }
                if (this.code.length > 4) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "材料编码不能超过4个字符"
                    });
                    return;
                }
            }
            if (this.name == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "材料名称不能为空"
                });
                return;
            }
            if (!this.unitId) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "单位名称不能为空"
                });
                return;
            }
            if (this.arr.length > 0) {
                for (let i in this.arr) {
                    if ( this.arr[i].convertUnitName == "" || this.arr[i].convertFactor == "" || this.arr[i].unitName == "") {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content:
                                "单位名称，换算单位名称，换算单位系数不能为空"
                        });
                        return;
                    }
                }
            }
            if (this.isAdd) {
                let params = {
                    matTypeId: this.matId,
                    deptId: this.porjectType,
                    name: this.name,
                    code: this.code,
                    spec: this.spec,
                    model: this.model,
                    texture: this.texture,
                    unitName: this.unitName,
                    unitId: this.unitId,
                    plusDiff: this.matplusDiff == 0 ? "" : this.matplusDiff,
                    minusDiff: this.matminusDiff == 0 ? "" : this.matminusDiff,
                    remark: this.matremark,
                    unitList: this.arr,
                    diffType: this.matdiffType,
                    fullCode: this.matfullCode + this.code
                };
                getMatAdd(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.matUpdateModal = false;
                            this.matKeyWord = "";
                            this.getMat(this.matRow);
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let params = {
                    id: this.id,
                    deptId: this.porjectType,
                    name: this.name,
                    code: this.code,
                    spec: this.spec,
                    model: this.model,
                    texture: this.texture,
                    unitName: this.unitName,
                    unitId: this.unitId,
                    plusDiff: this.matplusDiff == 0 ? "" : this.matplusDiff,
                    minusDiff: this.matminusDiff == 0 ? "" : this.matminusDiff,
                    remark: this.matremark,
                    unitList: this.arr,
                    diffType: this.matdiffType,
                    fullCode: this.matfullCode + this.code
                };
                getMatEdit(params)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.matUpdateModal = false;
                            this.matKeyWord = "";
                            this.getMat(this.matRow);
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        matRemove(index, rows) {
            this.matRemoveId = rows.id;
            this.matDeteleModal = true;
        },
        matDetele() {
            getMatDel(this.matRemoveId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.matDeteleModal = false;
                        this.matKeyWord = "";
                        this.getMat(this.matRow);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        cancel(type) {
            if (type == 0) {
                this.matTypeDeteleModal = false;
            } else if (type == 1) {
                this.matTypeFlag = false;
            } else if (type == 2) {
                this.Modal = false;
                this.minusDiff = this.minus;
                this.plusDiff = this.plus;
                this.diffType = this.diff;
                this.changeFlag = 0;
            } else if (type == 3) {
                this.Modal = false;
                this.minus = this.minusDiff;
                this.plus = this.plusDiff;
                this.diff = this.diffType;
                this.changeFlag = 1;
                this.updataSumbit();
            } else if (type == 4) {
                this.matDeteleModal = false;
            } else if (type == 5) {
                this.matUpdateModal = false;
            } else if (type == 6) {
                this.ImportModal = false;
            } else if (type == 7) {
                this.ImportModal = false;
                window.open(this.importResultDir);
            }
        },
        //下载导入模板
        download() {
            window.open(
                `${this.$Global.fileSite}/fmam/mat/importTemplate/matImportTemplate.xlsx`
            );
        },
        //批量导入
        getImportExcel(e) {
            var file = document.getElementById("upload_file").files[0];
            var formdata = new FormData();
            //文件类型
            var Ary = file.name
                .substring(file.name.lastIndexOf(".") + 1)
                .toLowerCase();
            if (Ary != "xlsx" && Ary != "xls") {
                this.$Modal.warning({
                    title: "提示",
                    content: "请上传正确的文件格式"
                });
                return;
            }
            formdata.append("file", file, file.name);
            formdata.append("deptId", this.porjectType);
            let config = {
                headers: { "Content-Type": "multipart/form-data" }
            };
            getMatimportExcel(formdata, config)
                .then(res => {
                    if (res.code == 200) {
                        this.importResultDir = res.data.importResultDir;
                        this.failNumber = res.data.failNumber;
                        this.successNumber = res.data.successNumber;
                        this.ImportModal = true;
                        document.getElementById("upload_file").value = "";
                        this.getMatType();
                        this.getAllMatType();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
    mounted() {
        this.porjectType = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getMatType();
        this.getUnit();
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .mat {
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        .left {
            width: 540px;
            height: 100%;
            border: 1px solid var(--themeColor1);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 40px;
            .search {
                width: 100%;
                // margin-top: 20px;
                border-bottom: 1px solid #ebeef5;
                display: flex;
                justify-content: center;
                height: 60px;
                align-items: center;
            }
            .mat_table {
                width: 100%;
                margin: 20px auto;
            }
            .mat_more {
                width: 100%;
                // margin-top: 20px;
                border-top: 1px solid #ebeef5;
                display: flex;
                justify-content: center;
                height: 100px;
                align-items: center;
            }
        }
        .right {
            margin-left: 20px;
            flex: 1;
            h2 {
                width: 100%;
                margin: 0 auto;
            }
            .search {
                width: 100%;
                margin: 0 auto;
                height: 60px;
                border-bottom: 1px solid #ebeef5;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
    }
}
.mat_content {
    width: 100%;
    margin: 0 auto;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
    h2 {
        width: 96%;
        margin: 0 auto;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 400;
    }
    .list {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            span {
                display: block;
                width: 100px;
                height: 32px;
                line-height: 32px;
            }
            p {
                width: 20px;
                padding-left: 3px;
            }
            .tip {
                position: absolute;
                width: 10px;
                top:0;
                left:0;
                color: red;
                font-size: 16px;
            }
        }
    }
    .submit {
        width: 100%;
        margin: 0 auto;
        border-top: 1px solid #ccc;
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
    .title {
        width: 96%;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #666;
    }
    .ulbox {
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        min-height: 60px;
        display: flex;
        flex-wrap: wrap;
        border-radius: 5px;
        border: 1px dashed #d3d3d3;
        .form-group {
            width: 40%;
            height: 60px;
            display: flex;
            margin-left: 5%;
            margin-right: 5px;
            margin-bottom: 10px;
            margin-top: 10px;
            align-items: center;
            justify-content: center;
            background: #eee;
            border-radius: 5px;
            .input-group,
            .input-group_second {
                width: 80px;
                height: 32px;
                display: flex;
                border-radius: 5px;
                border: 1px solid #fff;
                position: relative;
                button {
                    width: 32px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #fff;
                    border: none;
                    outline: none;
                    border-radius: 5px;
                    cursor: pointer;
                }
                span {
                    width: 75px;
                    background: #fff;
                    text-align: center;
                    line-height: 32px;
                }
                ul {
                    position: absolute;
                    top: 32px;
                    left: 0;
                    width: 75px;
                    height: 100px;
                    list-style: none;
                    overflow-y: scroll;
                    background: #eee;
                    z-index: 10;
                    li {
                        width: 90%;
                        margin: 0 auto;
                        cursor: pointer;
                    }
                    li:hover {
                        border-bottom: 1px solid #000;
                        color: var(--themeColor);
                    }
                }
            }
            input {
                height: 32px;
                width: 75px;
                border-radius: 5px;
                border: 1px solid #dcdee2;
                padding-left: 5px;
            }
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                appearance: none;
                -webkit-appearance: none;
            }
            .createFollowCheck input[type="number"] {
                appearance: textfield;
                -moz-appearance: textfield;
            }
        }
    }
}
.imp {
    width: 400px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
            width: 70px;
            margin-right: 10px;
            font-size: 18px;
        }
    }
}
</style>
